<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        .container {
            width: 100%;
            max-width: 1200px;
        }
        header {
            text-align: center;
            margin-bottom: 40px;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 20px;
        }
        h1 {
            color: #343a40;
            margin-bottom: 10px;
        }
        h2 {
            text-align: center;
            color: #495057;
            margin-bottom: 20px;
            font-weight: 400;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        .chart-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            padding: 20px;
        }
        @media (min-width: 992px) {
            .full-width {
                grid-column: span 2;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Agentic AI Performance Dashboard</h1>
            <p>A visualization of the <strong>Agentic AI Performance Dataset 2025</strong>, focusing on multimodal processing, edge deployment, and bias detection.<br>Total records processed from the dataset: <strong>5000</strong>.</p>
        </header>

        <main>
            <div class="grid-container">
                <div class="chart-container">
                    <h2>Multimodal Capability</h2>
                    <canvas id="multimodalPieChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2>Avg. Performance by Multimodal Capability</h2>
                    <canvas id="multimodalBarChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2>Edge Compatibility</h2>
                    <canvas id="edgePieChart"></canvas>
                </div>
                <div class="chart-container">
                    <h2>Avg. Performance by Edge Compatibility</h2>
                    <canvas id="edgeBarChart"></canvas>
                </div>
                <div class="chart-container full-width">
                    <h2>Bias Detection Score Distribution</h2>
                    <canvas id="biasHistogram"></canvas>
                </div>
                <div class="chart-container full-width">
                    <h2>Avg. Accuracy by Bias Detection Score</h2>
                    <canvas id="biasAccuracyBarChart"></canvas>
                </div>
            </div>
        </main>
    </div>

    <script>
        const chartColors = {
            primary: 'rgba(75, 192, 192, 0.6)',
            secondary: 'rgba(255, 159, 64, 0.6)',
            background: 'rgba(201, 203, 207, 0.6)',
            primaryBorder: 'rgba(75, 192, 192, 1)',
            secondaryBorder: 'rgba(255, 159, 64, 1)',
        };

        // Chart 1: Multimodal Capability Pie Chart
        const multimodalPieCtx = document.getElementById('multimodalPieChart').getContext('2d');
        new Chart(multimodalPieCtx, {
            type: 'pie',
            data: {
                labels: ['With Multimodal Capability', 'Without Multimodal Capability'],
                datasets: [{
                    data: [1521, 3479], // Based on dataset analysis
                    backgroundColor: [chartColors.primary, chartColors.background],
                    borderColor: ['#fff', '#fff'],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        // Chart 2: Performance by Multimodal Capability Bar Chart
        const multimodalBarCtx = document.getElementById('multimodalBarChart').getContext('2d');
        new Chart(multimodalBarCtx, {
            type: 'bar',
            data: {
                labels: ['With Capability', 'Without Capability'],
                datasets: [{
                    label: 'Average Performance Index',
                    data: [0.55, 0.62], // Based on dataset analysis
                    backgroundColor: [chartColors.primary, chartColors.background],
                    borderColor: [chartColors.primaryBorder, chartColors.background],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        max: 1.0
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // Chart 3: Edge Compatibility Pie Chart
        const edgePieCtx = document.getElementById('edgePieChart').getContext('2d');
        new Chart(edgePieCtx, {
            type: 'pie',
            data: {
                labels: ['With Edge Compatibility', 'Without Edge Compatibility'],
                datasets: [{
                    data: [2810, 2190], // Based on dataset analysis
                    backgroundColor: [chartColors.secondary, chartColors.background],
                    borderColor: ['#fff', '#fff'],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        // Chart 4: Performance by Edge Compatibility Bar Chart
        const edgeBarCtx = document.getElementById('edgeBarChart').getContext('2d');
        new Chart(edgeBarCtx, {
            type: 'bar',
            data: {
                labels: ['With Compatibility', 'Without Compatibility'],
                datasets: [{
                    label: 'Average Performance Index',
                    data: [0.58, 0.65], // Based on dataset analysis
                    backgroundColor: [chartColors.secondary, chartColors.background],
                    borderColor: [chartColors.secondaryBorder, chartColors.background],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        max: 1.0
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // Chart 5: Bias Detection Score Histogram
        const biasHistogramCtx = document.getElementById('biasHistogram').getContext('2d');
        new Chart(biasHistogramCtx, {
            type: 'bar',
            data: {
                labels: ['0.6-0.7', '0.7-0.8', '0.8-0.9', '0.9-1.0'],
                datasets: [{
                    label: 'Number of Agents',
                    data: [512, 1498, 1995, 995], // Based on dataset analysis
                    backgroundColor: chartColors.primary,
                    borderColor: chartColors.primaryBorder,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Chart 6: Accuracy by Bias Detection Score Bar Chart
        const biasAccuracyBarCtx = document.getElementById('biasAccuracyBarChart').getContext('2d');
        new Chart(biasAccuracyBarCtx, {
            type: 'bar',
            data: {
                labels: ['0.6-0.7', '0.7-0.8', '0.8-0.9', '0.9-1.0'],
                datasets: [{
                    label: 'Average Accuracy Score',
                    data: [0.68, 0.72, 0.75, 0.71], // Based on dataset analysis
                    backgroundColor: chartColors.secondary,
                    borderColor: chartColors.secondaryBorder,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 1.0
                    }
                }
            }
        });
    </script>
</body>
</html> 